<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入群名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item prop="state">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option label="禁用" :value="0" />
          <el-option label="启用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="pageList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column label="群名称" align="center" prop="name" />
      <el-table-column label="群描述" align="center" prop="description" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">启用</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleUpdate(scope.row)" class="edbt">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="handleQuery" />
    <!-- 通讯录群管理修改 -->
    <el-dialog title="通讯录群管理" class="pm-newdialog" :visible.sync="open" :before-close="handleClose">
      <div class="dia-content">
        <div class="diaitem">
          <label class="keyname">群名称</label>
          <div class="dialeft">
            <el-input class="diaipt" placeholder="请输入群名称" v-model="eidtdata.name"></el-input>
          </div>
        </div>
        <div class="diaitem">
          <label class="keyname">群描述</label>
          <div class="dialeft">
            <el-input class="diaipt" placeholder="请输入群名称" v-model="eidtdata.description"></el-input>
          </div>
        </div>
        <div class="diaitem">
          <label class="keyname"><span style="color: #FF6060;">*</span>状态</label>
          <el-radio-group style="margin-left: 14px;" v-model="eidtdata.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </div>
      </div>
      <span class="dialog-footer">
        <el-button @click="open = false">关闭</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getMessagingGrouplist, getUpdategGroup } from "@/api/personmanagement";
export default {
  name: "addressBook",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 参数表格数据
      pageList: [{
        id: '01',
        name: '办公室',
        description: '2',
        status: 0
      }],
      // 弹出层标题
      title: "通讯录群管理",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        status: undefined
      },
      eidtdata: {
        id: '',
        name: '',
        description: '',
        status: '',
      },

    };
  },
  created() {
    this.handleQuery()
  },
  methods: {
    // 修改数据
    handleUpdate(row) {
      this.eidtdata.name = row.name
      this.eidtdata.description = row.description
      this.eidtdata.status = row.status
      this.eidtdata.id = row.id
      this.open = true
    },
    // 修改提交
    handleSubmit() {
      getUpdategGroup(this.eidtdata).then(res => { })
    },
    //关闭弹框
    handleClose() {
      this.open = false
    },
    handleSelectionChange() { },
    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 查询
    handleQuery() {
      getMessagingGrouplist(this.queryParams).then(res => {
        console.log("=====", res)
        this.pageList = res.data.records
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .pm-newdialog .el-dialog {
  border-top-right-radius: 9px;
  border-top-left-radius: 9px;
}

::v-deep .pm-newdialog .el-dialog__header {
  background: #2D75D7;
  padding-top: 16px;
  padding-bottom: 15px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;

  .el-dialog__title {
    font-size: 16px;
    color: #fff;
  }
}

::v-deep .pm-newdialog .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  border: 2px solid #fff;
  font-weight: bold;
  padding: 2px;
}

::v-deep .el-input--medium .el-input__inner {
  height: 31px;
  line-height: 31px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

.dia-content {
  display: flex;
  flex-direction: column;
  padding-top: 36px;
  padding-left: 24px;
  padding-right: 14px;
  padding-bottom: 37px;

  .diaitem {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #CFCCCC;
    border-bottom: none;

    .keyname {
      width: 20%;
      padding: 10px 0;
      padding-right: 11px;
      text-align: right;
      color: #555555;
      font-size: 14px;
      font-weight: 500;
      border-right: 1px solid #CFCCCC;
    }

    .dialeft {
      width: 80%;

      .diaipt {
        padding: 4px;
      }
    }

  }

  .diaitem:last-child {
    border-bottom: 1px solid #CFCCCC;
  }
}

.edbt {
  background: #1890FF;
  padding: 4px 11px;
  border-color: #1890FF;
}
</style>
